import React, { useState } from "react";
import PropTypes from "prop-types";
import Link from "next/link";
import { FieldTimeOutlined, FieldNumberOutlined, FolderOpenOutlined } from '@ant-design/icons'
import { Card, Divider } from "antd";
import marked from 'marked'
import "./share.scss";
import hljs from "highlight.js";
import 'highlight.js/styles/monokai-sublime.css';
import CountTo from 'react-count-to'
import { formatStamp } from '../../../filters/index'

const renderer = new marked.Renderer();
marked.setOptions({
  renderer: renderer,
  gfm: true,
  pedantic: false,
  sanitize: false,
  tables: true,
  breaks: false,
  smartLists: true,
  smartypants: false,
  sanitize: false,
  xhtml: false,
  highlight: function (code) {
    return hljs.highlightAuto(code).value;
  }

});
// console.log(formatStamp)
const blogListItem = props => {
  const [blogItem, setBlogItem] = useState(props.itemData);
  const [topicInfo, setTopicInfo] = useState(JSON.parse(props.topicInfo.info));
  return (
    <div>
      {blogItem ?

        <Link href={`/share/component/shareItem?id=${blogItem.id}`}>
          <a>
            <Card
              hoverable
              cover={
                <img
                  alt="example"
                  style={{ height: 300 }}
                  src={blogItem.imgsrc ? blogItem.imgsrc : 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=225264473,1817553437&fm=26&gp=0.jpg'}
                />
              }
            >
              {/* <h4>{ blogItem.articleImg }</h4> */}
              <div className="list-info">{"标题：" + blogItem.title}</div>
              <div className="list-info">&nbsp;{"简介：" + blogItem.introduce}</div>
              <div className="list-info list-footer">
                <span> <FieldTimeOutlined />{formatStamp(blogItem.addTime)} </span>
                <span> <FolderOpenOutlined />{ topicInfo.shareTopicTitle } </span>
                <span> <FieldNumberOutlined /><CountTo to={blogItem.view_count} speed={1500} /> 人 </span>
              </div>
            </Card>

          </a>
        </Link>
        : <p>暂无数据</p>}
    </div>
  );
};

blogListItem.propTypes = {
  blogItem: PropTypes.object
};
export default blogListItem;
